<template>
  <div>
    <a-card v-if="!showResult" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form-model
          ref="formModel"
          :model="form"
          layout="inline"
          :rules="{
            name: [
              {
                validator: validators.noWhitespace(),
                trigger: 'change',
              },
              {
                validator: validators.noIllegalString(),
                trigger: 'change',
              },
              {
                max: 10,
                message: '长度在 1 到 10 个字符',
                trigger: 'change',
              },
            ],
          }"
        >
          <a-row :gutter="[16, 16]" type="flex" justify="end">
            <a-col :md="6" :sm="8">
              <a-form-model-item prop="name" label="应用名称">
                <a-input autocomplete="off" v-model="form.name" />
              </a-form-model-item>
            </a-col>
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-col :md="12" :sm="24">
                <a-button
                  type="primary"
                  @click="loadData(true)"
                  icon="search"
                >
                  查询
                </a-button>
                <a-button
                  @click="resetSearchForm"
                  icon="reload"
                  style="margin-left: 8px"
                >
                  重置
                </a-button>
              </a-col>
            </span>
          </a-row>
        </a-form-model>
      </div>

      <a-table
        rowKey="id"
        size="middle"
        :columns="columns"
        :dataSource="gDataSource"
        :pagination="gPagination"
        @change="gHandleTableChange"
      >
        <span slot="sortCol" slot-scope="text, record, index">
          {{
            (gPagination.current - 1) * gPagination.pageSize +
            parseInt(index) +
            1
          }}
        </span>
        <span slot="cloudType" slot-scope="text, record">
          <template v-if="record.cloudResourceTypeName === '容器云'">
            <img src="~@/assets/k8s_logo.svg" alt="logo" style="width: 18px">
          </template>
          <template v-else-if="record.cloudResourceTypeName === '华为云'">
            <img src="~@/assets/huawei_logo.png" alt="logo" style="width: 18px">
          </template>
          <template v-else>
            <img src="~@/assets/aliyun_logo.png" alt="logo" style="width: 18px">
          </template>
          {{ text }}
        </span>
        <span slot="result" slot-scope="text, record">
          <template v-if="record.statusName === '成功'">
            <a-icon type="check-circle" style="color: #15ed15;font-size: 18px;" />
          </template>
          <template v-else-if="record.statusName === '进行中'">
            <a-icon type="loading" style="color: #40a9ff;font-size: 18px;" />
          </template>
          <template v-else>
            <a-icon type="close-circle" style="color: red;font-size: 18px;" />
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" icon="profile" @click="showDetail(record)">调度结果偏差分析</a-button>
        </span>
      </a-table>
    </a-card>

    <template v-else>
      <ForecastResult
        :appInfo="detailInfo"
        @on-close="
          () => {
            showResult = false;
          }
        "
      />
    </template>
  </div>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";
import ForecastResult from "./modules/ForecastResult";

export default {
  name: "F030205",
  mixins: [GwListMixin],
  components: { ForecastResult },
  data() {
    return {
      visible: false,
      showResult: false,
      form: {
        name: "",
      },
      gDataSource: [],
      detailInfo: {},
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "应用名称",
          dataIndex: "appName",
        },
        {
          title: "云平台资源",
          dataIndex: "cloudResourceName",
        },
        {
          title: "调度类型",
          dataIndex: "cloudResourceTypeName",
          scopedSlots: { customRender: "cloudType" },
        },
        {
          title: "原数据中心 ",
          dataIndex: "srcDatacenterName",
        },
        {
          title: "目标数据中心",
          dataIndex: "dstDatacenterName",
        },
        {
          title: "调度结果",
          align: "center",
          dataIndex: "statusName",
          scopedSlots: { customRender: "result" },
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.name = this.form.name;
        this.gQueryParam.status = 3;
        this.gQueryParam.title = "多数据中心调度-动态调度机制-调度结果偏差分析";
        this.gQueryParam.content = "查询调度结果偏差列表";
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        gPostAction("/scheduler/job/page", this.gQueryParam).then((res) => {
          if (res.success) {
            this.gDataSource = res.data.list || [];
            this.gPagination.total = res.data.totalCount;
          }
        });
      });
    },
    showDetail(record) {
      this.showResult = true;
      this.detailInfo = record;
    },
    resetSearchForm() {
      this.form.name = "";
      this.$refs.formModel.resetFields();
    },
  },
};
</script>
